<template>
	<view class="perfect">
		<u-navbar leftText="" title="完善信息" :safeAreaInsetTop="true" :bgColor="bgColor">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="20" margin-top="20rpx" @click="back"></u-icon>
			</view>
		</u-navbar>
		<view class="innerbox">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 1250rpx;">
				<view class="message">
					<view class="selectbox">
						<view class="title">
							姓名
						</view>
						<view class="inputbox">
							<u--input v-model="formData.name" placeholder="请输入" border="bottom" clearable></u--input>
						</view>
					</view>

					<view class="selectbox ">
						<view class="title">
							性别
						</view>
						<view class="inputbox border" @click="handlesexselect">
							<view class="selecttext">
								<view v-if="!formData.gender" class="selectpolice">
									请选择
								</view>
								<view v-else class="" style="color: black; text-indent: 10rpx;">
									{{formData.gender}}
								</view>
							</view>

						</view>
					</view>
					<!-- 报考专业 -->
					<view class="selectbox ">
						<view class="title">
							报考专业
						</view>
						<view class="inputbox border" @click="handlespecialtyselect">
							<view class="selecttext">
								<view v-if="!formData.specialtys" class="">
									请选择
								</view>
								<view v-else class="" style="color: black; text-indent: 10rpx;">
									{{formData.specialtys}}
								</view>
							</view>

						</view>
					</view>
					<!-- 本科毕业院校 -->
					<view class="selectbox">
						<view class="title">
							本科毕业院校
						</view>
						<view class="inputbox">
							<u--input v-model="formData.school" placeholder="请输入" border="bottom" clearable></u--input>
						</view>
					</view>
					<!-- 本科毕业专业 -->
					<view class="selectbox">
						<view class="title">
							本科毕业专业
						</view>
						<view class="inputbox">
							<u--input v-model="formData.speciality" placeholder="请输入" border="bottom" clearable>
							</u--input>
						</view>
					</view>
					<!-- 本科成绩 -->
					<view class="selectbox">
						<view class="title">
							本科成绩
						</view>
						<view class="chengjixuanze">
							<view class="btn left" :class="{tj : currIndex =='0'}" @click="handleCurrIindex('0')">
								推荐免试
							</view>
							<view class="btn rigth" :class="{tj : currIndex =='1'}" @click="handleCurrIindex('1')">
								全国统考
							</view>
						</view>
						<view class="inputbox" v-if="inputFlag">
							<u--input v-model="formData.achievement" placeholder="请输入" border="bottom" clearable
								type="number"></u--input>
						</view>
					</view>

					<view class="selectbox">
						<view class="title">
							感兴趣的研究方向
						</view>
						<view class="inputbox">
							<u--input v-model="formData.direction" placeholder="请输入" border="bottom" clearable>
							</u--input>
						</view>
					</view>

					<view class="selectbox">
						<view class="title">
							手机号码
						</view>
						<view class="inputbox">
							<u--input v-model="formData.mobile" placeholder="请输入" border="bottom" type="number"
								clearable maxlength='11'>
							</u--input>
						</view>
					</view>

					<view class="selectbox">
						<view class="title">
							电子邮箱
						</view>
						<view class="inputbox">
							<u--input v-model="formData.mailbox" placeholder="请输入" border="bottom" clearable></u--input>
						</view>
					</view>

					<view class="selectbox">
						<view class="titleselect">
							个人照片
						</view>
						<view class="imgandmessage">
							<view class="imgsbox" v-for="item in zhaopianimgs">
								<view class="delIcon">
									<u-icon name="close-circle" color="#ffffff" size="28" @click="haneldelImg"></u-icon>
								</view>
								<image class="imgsOne LoadImg" :src="item"></image>
							</view>
							<image v-if="zhaopianimgs.length==0" class="uploadimg"
								src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/uplodimg.png"
								@click="uploadzhaopian"></image>
						</view>
					</view>


				</view>

				<view class="attachment">
					<view class="title">
						<view class="">
							个人简历附件
						</view>
						<view v-if="fujianData.length==0" class="upload" @click="upLoadFile">
							上传
						</view>
					</view>
					<view class="fileBox">
						<view class="fileitem" v-for="(item,index) in fujianData" :key="item.id">
							<view class="imgbox">
								<image class="" style="width: 100%; height: 100%;" src="../../static/image/files.png"></image>
							</view>
							<view class="fileName">
								{{item.name}}
							</view>
							<view class="imgbox">
								<image class="" style="width: 100%; height: 100%;" src="../../static/delicon.png"
									@click="delFujian(index)"></image>
							</view>

						</view>
					</view>
				</view>
				<view class="" style="height: 30rpx;">

				</view>
			</scroll-view>

		</view>
		<view class="bottombtn">
			<view class="okBtn" @click="$u.debounce(savemessage, 500)">
				确认
			</view>

		</view>
		<u-picker :show="sexshow" :columns="sexcolumns" @confirm="confirmsex" @cancel="closesex"
			@change="changeHandler"></u-picker>
		<u-picker :show="specialtyshow" :columns="specialtycolumns" keyName="name" @confirm="confirmspecialty"
			@cancel="closespecialty" @change="changespecialtyHandler">
		</u-picker>
	</view>
</template>

<script>
	import {
		science,
		personaledit,
		getpersonal
	} from "@/api/api.js"
	export default {
		data() {
			return {
				iszpFlag: true,
				bgColor: "#FFFFFF",
				formData: {
					name: "",
					gender: "",
					specialtys: "", //报考专业
					science_id: "", //报考专业id
					school: "", //本科毕业院校
					speciality: "", //本科毕业专业
					is_achievement: "1", //报考类型 0推荐免试 1全国统考
					achievement: "", //成绩
					direction: "", //研究方向
					mobile: "", //手机号码
					mailbox: "", //电子邮箱
				},
				sexshow: false, //性别选择器
				sexcolumns: [
					["男", "女"]
				],
				specialtyshow: false, //报考专业
				specialtycolumns: [], //专业列表
				currIndex: '1',
				type: 0,
				studentId: ",",
				inputFlag: true,
				fujianData: [],
				annex: "",
				zhaopianimgs: [],
				zhaopianids: '',
			}
		},
		onLoad(options) {
			if (options.type == 1) {
				this.getpersonals()
				this.science()
				this.type = options.type
			} else {
				this.science()
			}
		},
		methods: {
			haneldelImg() {
				this.zhaopianids = ''
				this.zhaopianimgs = []
			},
			delFujian(index) {
				console.log("deldeldel", index)
				// return
				this.fujianData.splice(index, 1)
				this.annex = ""
			},
			upLoadFile() {
				let that = this
				wx.chooseMessageFile({
					count: 6, //默认100
					type: 'file',
					success: function(res) {
						// console.log("上传成功", res);
						const tempFilePaths = res.tempFiles;
						console.log("tempFilePaths", tempFilePaths, tempFilePaths[0].path, tempFilePaths[0]
							.name)
						uni.uploadFile({
							// url: 'https://wlsy.nanjingyunpeng.cn/api/login/upload', 
							url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/upload',
							filePath: tempFilePaths[0].path,
							// fileName:tempFilePaths[0].name,
							name: 'img',
							formData: {
								'name': tempFilePaths[0].name
							},
							success: (uploadFileRes) => {
								console.log("附件上传结果", JSON.parse(uploadFileRes.data).data);
								that.fujianData.push(JSON.parse(uploadFileRes.data).data)
								that.annex = JSON.parse(uploadFileRes.data).data.id + ","
								console.log("this.annex",that.annex)
							},
							fail: (err) => {

							}
						});
					}
				});

			},
			uploadzhaopian() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://sssx.nanjingyunpeng.cn/index.php/system/Basic/postUploadOne', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'img',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									console.log("图片路径", uploadFileRes.data);
									this.zhaopianimgs[0] = (JSON.parse(uploadFileRes.data)
										.path)
									this.zhaopianids = JSON.parse(uploadFileRes.data).id
									// console.log(this.imgs)
									if (this.zhaopianimgs.length > 0) {
										// uni.showToast({
										// 	title: '最多可上传1张照片！',
										// 	duration: 4000,
										// 	icon: "none",
										// });
									}
								}
							});
						}
					}
				});


			},

			async science() {
				let res = await science()
				if (res.code == 1) {
					console.log("专业列表", res)
					this.specialtycolumns[0] = res.data
					// this.formData = res.data
				}
			},
			update() {
				uni.showToast({
					title: '功能暂未开放',
					icon: 'none',
					duration: 1000
				})
			},
			async getpersonals() {

				let res = await getpersonal()
				if (res.code == 1) {
					console.log("当前用户信息", res)
					this.formData.name = res.data.name
					this.formData.gender = res.data.gender
					this.formData.science_id = res.data.science_id
					this.formData.school = res.data.school
					this.formData.speciality = res.data.speciality
					this.formData.is_achievement = res.data.is_achievement
					this.formData.achievement = res.data.achievement
					this.formData.direction = res.data.direction
					this.formData.mobile = res.data.mobile
					this.formData.mailbox = res.data.mailbox
					this.formData.specialtys = res.data.science_id_text
					this.studentId = res.data.id
					this.fujianData = res.data.annex
					this.annex = res.data.annex[0].value + ","
					this.zhaopianimgs[0] = res.data.photos.url
					this.zhaopianids = res.data.photos.value
					if (this.formData.is_achievement == 0) {
						console.log("this.formData.is_achievement", this.formData.is_achievement)
						this.inputFlag = false
						this.currIndex = '0'
					}
					console.log("this.annex",this.annex)
					// console.log("this.formData.is_achievement",this.currIndex)
					// res.data.annex.forEach((item,index)=>{
					// 	this.annex += item.value
					// })
				}
			},
			handlesexselect() {
				this.sexshow = true
				console.log("2222")
			},
			changeHandler(e) {
				console.log("eeeee", e)
				this.formData.gender = e.value[0]
			},
			confirmsex(e) {
				console.log('confirm', e)
				this.sexshow = false
				this.formData.gender = e.value[0]
			},
			closesex(e) {
				console.log("4444")
				this.sexshow = false
			},
			//报考专业
			handlespecialtyselect() {
				this.specialtyshow = true
				console.log("2222")
			},
			changespecialtyHandler(e) {
				// console.log("eeeee", e)
				this.formData.specialtys = e.value[0].name
				console.log("eeeee", e, e.value[0].name)
			},
			confirmspecialty(e) {
				// console.log('confirm', e)
				this.specialtyshow = false
				this.formData.specialtys = e.value[0].name
				this.formData.science_id = e.value[0].id
				console.log('confirm', e.value[0].id)
			},
			closespecialty(e) {
				console.log("4444")
				this.specialtyshow = false
			},
			handleCurrIindex(index) {
				this.currIndex = index
				this.formData.is_achievement = index
				if (index == '0') {
					console.log("index", index)
					// this.formData.achievement = ''
					this.inputFlag = false
				} else {
					this.inputFlag = true
				}
			},
			async savemessage() {
				
				console.log("附件", this.annex)
				// return
				let sjh = /^1[3-9]\d{9}$/;
				if (!sjh.test(this.formData.mobile)) {
					uni.showToast({
						title: '手机号格式不正确！',
						icon: 'none',
						duration: 2000
					})
					return
				}

				let emailRegExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!emailRegExp.test(this.formData.mailbox)) {
					uni.showToast({
						title: '邮箱格式不正确!',
						icon: 'none',
						duration: 2000
					})
					return
				}

				if (this.formData.is_achievement == 0) {
					this.formData.achievement = ''
				}
				if (this.type == 0) {
					let data = {
						name: this.formData.name,
						gender: this.formData.gender,
						science_id: this.formData.science_id,
						school: this.formData.school,
						speciality: this.formData.speciality,
						is_achievement: this.formData.is_achievement,
						achievement: this.formData.achievement,
						direction: this.formData.direction,
						mobile: this.formData.mobile,
						mailbox: this.formData.mailbox,
						photos: this.zhaopianids,
						annex: this.annex,
					}
					console.log("填写的信息", this.formData)
					let res = await personaledit(data)
					if (res.code == 1) {
						console.log("完善信息", res)
						uni.showToast({
							title: '完善成功！',
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
					}
				} else {
					let data = {
						name: this.formData.name,
						gender: this.formData.gender,
						science_id: this.formData.science_id,
						school: this.formData.school,
						speciality: this.formData.speciality,
						is_achievement: this.formData.is_achievement,
						achievement: this.formData.achievement,
						direction: this.formData.direction,
						mobile: this.formData.mobile,
						mailbox: this.formData.mailbox,
						photos: this.zhaopianids,
						annex: this.annex,
						id: this.studentId
					}
					console.log("填写的信息", this.formData)
					let res = await personaledit(data)
					if (res.code == 1) {
						// console.log("修改成功", res)
						uni.showToast({
							title: '修改成功！',
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
					}
				}


			},
			closesex() {
				this.sexshow = false
			},
			back() {
				console.log("44444")
				uni.navigateBack({
					delta: 1
				});
				// if (this.type == 1) {
				// 	uni.navigateTo({
				// 		url: "../mine/index"
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: "../../pages/selectIdentity/index"
				// 	})
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-navbar__content.data-v-75dad532 {
		background-color: #FFFFFF;
	}

	.perfect {
		min-width: 100%;
		min-height: 100%;
		background-color: #F7F8FA;
		// padding: 0 30rpx;
		box-sizing: border-box;

		.innerbox {
			width: 720rpx;
			opacity: 1;
			margin-top: 196rpx;
			padding-top: 30rpx;
			padding-left: 30rpx;
			// padding: 0 30rpx;
			box-sizing: border-box;


			.message {
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding: 40rpx 30rpx;
				// background-color: pink;
				background: #ffffff;

				.selectbox {
					margin-bottom: 40rpx;
					position: relative;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
						text-indent: 12rpx;
					}

					.titleselect {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
						// padding-top: 60rpx;
					}

					.imgandmessage {
						margin-top: 30rpx;

						.imgsbox {
							display: inline-block;
							margin: 7rpx;
							position: relative;

							.delIcon {
								position: absolute;
								right: 0rpx;
							}
						}

						.delIcon {
							position: absolute;
							right: 0rpx;
						}

						.imgsOne {
							width: 199rpx;
							height: 199rpx;
							display: inline-block;
						}

						.handleimg {
							width: 199rpx;
							height: 199rpx;
							display: inline-block;
						}

						.uploadimg {
							margin-top: 30rpx;
							width: 199rpx;
							height: 199rpx;
						}
					}

					.chengjixuanze {
						display: flex;
						position: absolute;
						top: -20rpx;
						right: 0rpx;

						.btn {
							width: 144rpx;
							height: 64rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 33rpx;
							text-align: center;
							line-height: 64rpx;
							background: #F7F8FA;
							color: #666666;
							;
						}

						.left {
							border-radius: 12rpx 0rpx 0rpx 12rpx;
						}

						.rigth {
							border-radius: 0rpx 12rpx 12rpx 0rpx;
						}

						.tj {
							background: #4A9CFF;
							color: #ffffff;
						}
					}

					.inputbox {
						.selecttext {
							font-size: 30rpx;
							margin-top: 30rpx;
							font-weight: 400;
							color: #999999;
							line-height: 33rpx;

							.selectpolice {
								font-size: 30rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #C0C4CC;
								line-height: 33rpx;
								text-indent: 15rpx;
							}
						}


					}

					.border {
						border-bottom: 2rpx solid #E0E0E0;
						padding-bottom: 20rpx;
					}

				}
			}

			.attachment {
				width: 100%;
				// height: 300rpx;
				background-color: #ffffff;
				margin-top: 20rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.upload {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #4A9CFF;
						padding: 30rpx;
					}
				}

				.fileBox {
					.fileitem {
						width: 100%;
						height: 50rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 10rpx 0;
						margin-top: 20rpx;

						.fileName {
							width: 500rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 38rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.imgbox {
							width: 48rpx;
							height: 48rpx;
						}
					}


				}
			}


		}

		.bottombtn {
			width: 100%;
			height: 178rpx;
			// background-color: pink;
			position: fixed;
			bottom: 0;

			.okBtn {
				width: 622rpx;
				height: 88rpx;
				background: #4A9CFF;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				line-height: 88rpx;
				margin: 20rpx auto;
			}
		}
	}
</style>